<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大众健康事业部抖音评论系统</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #e0e0e0;
        }

        .container {
            background-color: #fff;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            overflow: auto;
            box-sizing: border-box;
        }

        table {
            width: 100%;
            height: auto;
            border-collapse: collapse;
            display: block;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 12px 20px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        tr:hover {
            background-color: #e9ecef;
        }

        .btn-fetch {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: #17a2b8;
            color: white;
            text-decoration: none;
            border-radius: 8px;
            transition: background-color 0.3s ease, transform 0.3s ease;
            align-self: center;
        }

        .btn-fetch:hover {
            background-color: #138496;
            transform: translateY(-2px);
        }

        .pagination {
            margin: 20px 0;
            text-align: center;
        }

        .pagination button {
            padding: 8px 15px;
            margin: 0 4px;
            background-color: #17a2b8;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
        }

        .pagination button:hover {
            background-color: #138496;
            transform: translateY(-2px);
        }

        .pagination button:disabled {
            background-color: #b0b0b0;
            cursor: not-allowed;
        }

        .container nav {
            width: 100%;
            overflow-x: auto;
            display: flex;
            justify-content: center;
        }

        .button-container {
            display: flex;
            justify-content: center;
            gap: 10px; /* 按钮之间的间距，根据需要调整 */
            margin-top: 20px; /* 距离标题的间距 */
        }

        .container nav table {
            width: auto;
            min-width: 100%;
        }
    </style>
</head>

<body>
<div class="container">
    <h1 style="text-align: center;">大众健康事业部抖音评论系统</h1>

    <div class="button-container">
        <button class="btn-fetch" onclick="fetchData(1)">加载最新视频数据</button>
        <button class="btn-fetch" onclick="download_video_detail()">下载视频详情</button>
        <button class="btn-fetch" onclick="download_comment_detail()">下载评论详情</button>
    </div>
    <table id="dataTable">
        <thead>
        <tr>
            <th style="text-align: center;">视频编号</th>
            <th style="text-align: center;">视频名称</th>
            <th style="text-align: center;">视频作者</th>
<!--            <th style="text-align: center;">视频发布时间</th>-->
            <th style="text-align: center;">视频发布时间</th>
            <th style="text-align: center;">视频链接</th>
            <th style="text-align: center;">搜索关键词</th>
            <th style="text-align: center;">点赞量</th>
            <th style="text-align: center;">评论量</th>
            <th style="text-align: center;">收藏量</th>
            <th style="text-align: center;">转发量</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据行将被插入这里 -->
        </tbody>
    </table>

    <!-- <div class="pagination">
        <button onclick="fetchData(currentPage - 1)" id="prevPage" disabled>上一页</button>
        <span id="pageInfo"></span>
        <button onclick="fetchData(currentPage + 1)" id="nextPage">下一页</button>
    </div> -->
    <div class="pagination">
        <button onclick="fetchData(currentPage - 1)" id="prevPage" disabled>上一页</button>
        <span id="pageInfo"></span>
        <button onclick="fetchData(currentPage + 1)" id="nextPage">下一页</button>
        <input type="number" id="goToPage" min="1" placeholder="输入页码">
        <button onclick="goToPage()">跳转</button>
    </div>
</div>
<div style="position: fixed; bottom: 50px; left: 10px;">
    点击视频编号即可查看该视频前二十条评论<br>
    由于评论数量较大,评论详情需要下载excel查看<br>
    视频与评论数据请及时更新<br>
    有任何需求与问题请联系网站作者<br>
</div>
<script>
    function goToPage() {
        const goToPageInput = document.getElementById('goToPage');
        const page = parseInt(goToPageInput.value);
        if (!isNaN(page) && page >= 1 && page <= totalPages) {
            fetchData(page);
        } else {
            alert('请输入有效的页码');
        }
    }


    let currentPage = 1;
    let totalPages = 1;

    function fetchData(page) {
        currentPage = page;
        fetch(`http://123.56.96.74:8005/video?page=${page}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                // 获取原始数据的数组
                const originalDataArray = data.data;
                totalPages = data.total_pages;

                // 获取数据的长度
                const dataLength = originalDataArray.length;

                // 创建一个新数组来存储逆序的数据
                const reversedDataArray = [];

                // 使用for循环逆序填充新数组
                for (let i = dataLength - 1; i >= 0; i--) {
                    reversedDataArray.push(originalDataArray[i]);
                }

                const tableBody = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
                tableBody.innerHTML = ''; // 清空现有的表格内容

                // 使用forEach循环构建逆序的表格
                reversedDataArray.forEach(item => {
                    const row = `<tr>
                        <td><a href="javascript:void(0)" onclick="fetchComments(${parseInt(item[0])})">${item[0]}</a></td>
                        <td style="text-align;">${item[1]}</td>
                        <td style="text-align: center;">${item[2]}</td>
<!--                        <td style="text-align: center;">${item[3]}</td>-->
                        <td style="text-align: center;">${item[4]}</td>
                        <td style="text-align: center;">${item[5]}</td>
                        <td style="text-align: center;">${item[6]}</td>
                        <td style="text-align: center;">${item[7]}</td>
                        <td style="text-align: center;">${item[8]}</td>
                        <td style="text-align: center;">${item[9]}</td>
                        <td style="text-align: center;">${item[10]}</td>
                        </tr>`;
                    tableBody.innerHTML += row;
                });

                // 更新分页按钮状态
                document.getElementById('prevPage').disabled = currentPage === 1;
                document.getElementById('nextPage').disabled = currentPage === totalPages;
                document.getElementById('pageInfo').innerText = `第 ${currentPage} 页，共 ${totalPages} 页`;
            })
            .catch(error => {
                console.error('数据加载失败:', error);
            });
    }


    function download_video_detail() {
        fetch('http://123.56.96.74:8005/download_video')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '抖音视频表.xlsx';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                console.error('文件下载失败:', error);
            });
    }

    function download_comment_detail() {
        fetch('http://123.56.96.74:8005/download_all_comment')
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.blob();
            })
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '全部评论表.xlsx';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                window.URL.revokeObjectURL(url);
            })
            .catch(error => {
                console.error('文件下载失败:', error);
            });
    }

    function fetchComments(videoId) {
        const url = `http://123.56.96.74:8005/comment?videoId=${videoId}`;

        fetch(url)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应错误');
                }
                return response.json();
            })
            .then(data => {
                // 假设后端返回的数据结构为 [[评论1], [评论2], ...]
                const comments = data.map(commentArray => commentArray[0]);

                // 如果没有评论，提前返回
                if (comments.length === 0) {
                    window.alert("该视频暂无评论。");
                    return;
                }

                // 将评论逐行拼接成字符串
                let commentString = "视频评论：\n\n";
                comments.forEach((comment, index) => {
                    commentString += `${index + 1}. ${comment}\n`;
                });

                // 弹窗展示评论
                window.alert(commentString);
            })
            .catch(error => {
                console.error('获取评论时发生错误：', error);
                window.alert("获取评论失败，请检查网络或服务器状态。");
            });
    }

</script>
</body>

</html>